<template>
	<page-meta :root-font-size="fontsize" style="display: block">
		<!-- <scroll-view @scroll="scroll" scroll-y="true" class="content" :enhanced="true" :bounces="false"
			:show-scrollbar="false"> -->
			<view>
				<indexVue ref="index" v-if="!selected || selected == 0" :cur="selected == 0"></indexVue>
				<mineVue v-if="selected == 2" :cur="selected == 2" :reloadPage="reloadPage" ref="mineRef"></mineVue>
				<sharePopup ref="sharePopup"></sharePopup>
				<postDemand :isrefresh="isrefresh" @reload="reload" v-if="showpostDemand" @cancel="cancelpostDemand"
					:show="showpostDemand"></postDemand>
				<cover-view class="controls">
					<xlTabBar @click="clickTabBar" @clickcenter="clickcenter" :selected="selected"></xlTabBar>
				</cover-view>
			</view>
		<!-- </scroll-view> -->
		<xlTabBar @click="clickTabBar" @clickcenter="showpostDemand = true" :selected="selected"></xlTabBar>
	</page-meta>
</template>

<script>
	import sharePopup from "@/pagesHome/components/popup/sharePopup.vue";
	import indexVue from "@/pagesHome/components/home/index.vue";
	import mineVue from "@/pagesHome/components/home/mine.vue";
	import postDemand from "@/pagesHome/components/popup/postDemand.vue";
	import xlTabBar from "@/components/xlTabBar.vue"
	import {
		mapMutations,
		mapActions
	} from "vuex";
	import shareMixin from "@/util/share.js";
	export default {
		name: "Home",
		mixins: [shareMixin],
		components: {
			indexVue,
			mineVue,
			postDemand,
			sharePopup,
			xlTabBar
		},
		data() {
			return {
				fontsize: "",
				showpostDemand: false,
				reloadPage: true,
				isrefresh: false,
			};
		},
		computed: {
			selected() {
				return this.$store.state.selected || 0;
			},
		},
		mounted() {
			// this.$refs.sharePopup.open();
		},

		onLoad(options) {
			// #ifdef APP-PLUS
			uni.$on("clickcenter", () => {
				this.showpostDemand = true
			});
			uni.$on("clickMy", (index) => {
				this.setStatus();
				this.setSelected(index);
			});
			// #endif
			let designWidth = 37.5; //因设计图的宽度
			let that = this;
			//窗体改变大小触发事件
			uni.onWindowResize(res => {
				console.log("变化后的窗口宽度=", res.size.windowWidth);
				//100*屏幕宽度/设计稿宽度
				that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
				console.log("字体大小：", that.fontsize);
			});

			//打开获取屏幕大小
			uni.getSystemInfo({
				success(res) {
					console.log("设备信息：", res);
					that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
					console.log("字体大小：", that.fontsize);
				},
			});
		},
		onShow(options) {
			if (this.$getStoraged("phone").length) {
				this.isrefresh = true;
			}
			if (this.selected === 2) {
				this.setUserInfo();
			}
			// this.$refs.index.getList();
			this.reloadPage = true;
		},
		onHide() {
			this.reloadPage = false;
		},
		methods: {
			...mapActions("user", ["setUserInfo", "setStatus"]),
			...mapMutations(["setSelected"]),
			// success() {
			//   console.log("我分享成功了");
			// },
			clickcenter() {
				console.log(1111)
				this.showpostDemand = true
			},
			scroll() {},
			cancelpostDemand() {
				this.showpostDemand = false;
				this.isrefresh = false;
				setTimeout(() => {
					this.isrefresh = true;
				}, 300);
			},
			reload() {
				console.log("刷新成功");
				this.reloadPage = true;
			},
			clickTabBar(index) {
				console.log(index)
				this.setStatus();
				this.setSelected(index);
			},
		},
		watch: {
			selected(n, o) {
				if (n == 2) {
					this.setUserInfo();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		height: 86vh;

		.container {
			padding: 0;

			.c1 {
				background-color: #ff9d49;
			}

			.wrap {
				width: 100%;
				background: #fff;

				box-sizing: border-box;
				border-radius: 0.625rem 0.625rem 0 0;
				box-sizing: border-box;
				padding: 18px 10px 1px 10px;

				.swiper {
					height: 92px;
					margin: 15px 0 0 0;

					// padding-bottom: 60px;
					.indicator {
						@include flex(row);
						justify-content: center;

						&__dot {
							height: 6px;
							width: 6px;
							border-radius: 100px;
							background-color: rgba(255, 255, 255, 0.35);
							margin: 0 5px;
							transition: background-color 0.3s;

							&--active {
								background-color: #ffffff;
							}
						}
					}

					.indicator-num {
						padding: 2px 0;
						background-color: rgba(0, 0, 0, 0.35);
						border-radius: 100px;
						width: 35px;
						@include flex;
						justify-content: center;

						&__text {
							color: #ffffff;
							font-size: 12px;
						}
					}
				}
			}

			.tabs {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				position: sticky;
				// top: 58px;
				top: 80px;
				background: #fff;
				z-index: 999;

				/deep/.u-tabs {
					width: 70%;
					overflow-x: scroll;
					font-size: 14px;
				}

				.right-position {
					position: relative;
					display: flex;
					align-items: center;
					margin-right: 0.75rem;
					color: #ff9d49;
					width: 100px;
					flex-shrink: 0;

					.iconfont {
						margin-right: 0.125rem;
					}

					.tap {
						@include ells(1);
					}

					.tips {
						position: absolute;
						width: 213px;
						background: #03030390;
						top: 40px;
						left: -160px;
						border-radius: 8px;
						box-sizing: border-box;
						padding: 0.625rem;

						&::after {
							content: "";
							position: absolute;
							top: -8px;
							left: 180px;
							width: 0px;
							height: 0px;
							border-left: 8px solid transparent;
							border-right: 8px solid transparent;
							border-bottom: 8px solid #03030390;
						}

						.title-wrap {
							display: flex;
							justify-content: space-between;
							font-size: 14px;
							font-family: PingFang SC;
							font-weight: 600;
							line-height: 20px;
							opacity: 1;

							span {
								color: #ffffff;
							}

							.iconfont {
								color: #858585;
							}
						}

						.content {
							font-size: 12px;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 17px;
							color: #ffffff;
							opacity: 1;
							margin: 6px 0;
						}

						.btn {
							width: 76px;
							height: 27px;
							background: #ff8822;
							border-radius: 14px;
							font-size: 12px;
							font-family: PingFang SC;
							font-weight: 600;
							line-height: 17px;
							color: #ffffff;
							text-align: center;
							line-height: 27px;
						}
					}
				}
			}

			@media screen and (min-width: 250px) {
				@keyframes translateX {
					0% {
						transform: translateX(0px);
					}

					10% {
						transform: translateX(-10px);
					}

					20% {
						transform: translateX(-20px);
					}

					30% {
						transform: translateX(-30px);
					}

					40% {
						transform: translateX(-40px);
					}

					50% {
						transform: translateX(-50px);
					}

					60% {
						transform: translateX(-40px);
					}

					70% {
						transform: translateX(-30px);
					}

					80% {
						transform: translateX(-20px);
					}

					90% {
						transform: translateX(-10px);
					}

					100% {
						transform: translateX(0px);
					}
				}

				/deep/.u-tabs {
					animation: translateX 0.5s ease;
				}
			}

			.tab-content {
				background: #f7f7f7;

				.tab-list {
					display: table;
					width: 100%;
				}
			}
		}

		.ydts {
			width: 100%;
			height: 75px;
			// position: fixed;
			// bottom: 0px;
			padding-bottom: 50px;
			background-color: rgba(255, 255, 255, 0.3);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);

			.ydts_wrap {
				width: 204px;
				height: 32px;
				background: #ededed;
				border-radius: 4px;
				opacity: 1;
				font-size: 12px;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgb(139, 139, 139);
				margin: 5px auto 0;
				line-height: 32px;
				text-align: center;

				.p2 {
					font-size: 13px;
					font-weight: 600;
					color: #ff8822;
				}
			}
		}
	}

	.controls {
		z-index: 99999;
	}
</style>